<template>
  <div>
    <topBar></topBar>
    <topHeader></topHeader>
      <div style="padding: 10px">
        <div style="width:80%;margin:0 auto;padding: 10px">
          <label styly="width:150px">学校名称:</label>
          <el-input v-model="search" placeholder="请输入关键字" style="width: 30%"></el-input>
        </div>
        <div style="width:80%;margin:0 auto;padding: 10px">
          <label>请选择科目：</label>
          <el-select>
            <!--          <el-option placeholder="请选择" ></el-option>-->
            <option value="0">物理</option>
            <option value="1">历史</option>
          </el-select>
          <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          style="width: 80%;margin:0 auto">
          <el-table-column
            prop="unname"
            label="学校名称">
          </el-table-column>
          <el-table-column
            prop="mname"
            label="专业名称"
          >
          </el-table-column>
<!--          <el-table-column-->
<!--            prop="dcribe"-->
<!--            label="首选课">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="dcribe"-->
<!--            label="再选课">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="dcribe"-->
<!--            label="再选课">-->
<!--          </el-table-column>-->

        </el-table>
        <div style="margin:0 auto;padding-top: 20px;width: 80%">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    <miFooter></miFooter>
  </div>
</template>

<script>
import request from '../utils/request'
import TopBar from './TopBar'
import TopHeader from './TopHeader'
import MiFooter from './MiFooter'
export default {
  name: 'Limitmajor',
  components: {
    'topBar': TopBar,
    'topHeader': TopHeader,
    'miFooter': MiFooter
  },
  data () {
    return {
      loading: true,
      search: '',
      radio: 1,
      radio1: '不限',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [ ]
    }
  },
  created () {
    this.load()
  },
  methods: {
    load () {
      this.loading = true
      request.get('api/limitmajor', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.loading = false
        this.tableData = res.data.records
        this.total = res.data.pages
        // console.log(res.data.records)
        // console.log(res.data)
        console.log('11+' + this.data.records)
      })
    },
    handleCurrentChange (pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.load()
    }
  }
}
</script>

<style scoped>
.radio{
  width:80%;
  margin: 0 auto;
  padding: 10px;
}
.radio1{
  width:80%;
  margin:0 auto;
  padding:10px
}

</style>
